 <template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearFix">
        <h2>企业信息（按照证书上的内容逐字填写）</h2>
      </div>

      <div>
        <el-form ref="formData" :model="formData" label-width="200px">
          <el-form-item label="企业状态">{{activated ? '已激活' : '未激活'}}</el-form-item>
          <el-form-item label="企业邀请码">{{inviteCode}}</el-form-item>
          <el-form-item label="企业名称">
            <el-input class="input-width" v-model="formData.infoName" placeholder="爱灵格（XLingual）平台"></el-input>
          </el-form-item>

          <el-form-item label="企业简称">
            <el-input class="input-width" v-model="formData.infoAbb"></el-input>
          </el-form-item>

          <el-form-item label="统一执照信用代码">
            <el-input class="input-width" v-model="formData.infoLisenceSn"></el-input>
          </el-form-item>

          <el-form-item label="营业期限">
            <el-date-picker
              v-show="!formData.infoIsPerpetual"
              v-model="formData.infoEndDate"
              type="date"
              placeholder="选择时间"
            ></el-date-picker>
            <el-switch v-model="formData.infoIsPerpetual" active-color="#13ce66"></el-switch>
            <span class="longTerm-style">长期</span>
          </el-form-item>

          <el-form-item label="营业执照">
            <el-upload
              class="upload-demo upload-width"
              v-model="formData.infoLisenceImg"
              :action="uploadImageUrl"
              accept=".gif, .jpg, .jpeg, .bmp, .png"
              :on-success="onSuccess"
              list-type="picture"
              :show-file-list="false"
              :headers="token"
            >
              <img
                v-if="formData.infoLisenceImg"
                :src="downImgHost + '/' + formData.infoLisenceImg"
                class="avatar upload-width"
              >
              <el-button size="small" class="add-style" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="企业经营范围">
            <el-input class="input-width" :rows="4" v-model="formData.infoScope" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="单位所在地">
            <el-select
              v-model="formData.infoLocProvinceId"
              @change="changeProvince"
              placeholder="请选择省"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.name"
                :label="item.name"
                :value="item.sn"
              ></el-option>
            </el-select>
            <el-select v-model="formData.infoLocCityId" @change="changeCity" placeholder="请选择市">
              <el-option
                v-for="item in cityOptions"
                :key="item.name"
                :label="item.name"
                :value="item.sn"
              ></el-option>
            </el-select>
            <el-select v-model="formData.infoLocDistrictId" placeholder="请选择区">
              <el-option
                v-for="item in districtOptions"
                :key="item.name"
                :label="item.name"
                :value="item.sn"
              ></el-option>
            </el-select>
            <div>
              <el-input class="input-width" v-model="formData.infoLocAddress" placeholder="详细地址"></el-input>
            </div>
          </el-form-item>

          <el-form-item>
            <!-- <el-button @click="resetForm('formData')" class="widthBtn">重置</el-button> -->
            <el-button @click="submitForm" class="widthBtn add-style" type="primary">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCountry, getDistrict, getProvince, getCity } from "api/address.js";
import { setBaseInfo } from "api/profile.js";
import { uploadImageUrl, downImgHost } from "src/config/env";
import { getToken } from "src/util/auth";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      formData: {
        infoName: "", //企业名称
        infoAbb: "", //企业简称
        infoLisenceSn: "", //统一执照信用代码
        infoEndDate: "", //营业期限
        infoIsPerpetual: false, // 营业期限是否长期
        infoLisenceImg: "", //营业执照
        infoScope: "", //企业经营范围
        infoLocAddress: "", // 详细地址

        infoLocCountryId: 86, //国家
        infoLocProvinceId: "", // 省
        infoLocCityId: "", // 城市
        infoLocDistrictId: "" // 区
      },
      activated: true, // 是否激活
      inviteCode: "", // 邀请码
      uploadImageUrl: uploadImageUrl, // 上传地址
      provinceOptions: [], // 省
      districtOptions: [], // 区
      cityOptions: [], // 城市
      selectedOptions: [],
      token: { Authorization: "" },
      selectedOptions2: [],
      downImgHost: downImgHost // 下载地址
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  props: {
    enterpriceInfo: {
      type: Object,
      default() {
        return [];
      }
    }
  },
  watch: {
    enterpriceInfo: {
      handler: function(newVal, oldVal) {
        this.enterpriceInfo = newVal;
        this.dataInit();
      },
      deep: true
    }
  },
  mounted() {
    this.getAddress();
    this.dataInit();
    this.token.Authorization = getToken();
  },
  methods: {
    ...mapMutations(["GET_USERINFO", "RECORD_USERINFO"]),
    dataInit() {
      this.activated = this.enterpriceInfo.activated;
      this.inviteCode = this.enterpriceInfo.inviteCode;
      for (var i in this.formData) {
        for (var enterItem in this.enterpriceInfo) {
          if (i === enterItem) {
            this.formData[i] = this.enterpriceInfo[enterItem];
          }
        }
      }

      this.formData.infoLocCityId &&
        this.getCityData(this.formData.infoLocProvinceId);
      this.formData.infoLocDistrictId &&
        this.getDistrictData(this.formData.infoLocCityId);
    },
    onSuccess(res, file) {
      this.formData.infoLisenceImg = res.data;
    },
    submitForm() {
      setBaseInfo(this.formData).then(res => {
        this.GET_USERINFO();
        let userInfo = this.userInfo;
        userInfo.infoName = this.formData.infoName;
        this.RECORD_USERINFO(userInfo);
        this.$message.success("数据已上传！");
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    changeProvince: function(id) {
      this.formData.infoLocCityId = ""; // 城市
      this.formData.infoLocDistrictId = ""; // 区
      this.getCityData(id);
    },
    changeCity: function(id) {
      this.formData.infoLocDistrictId = ""; // 区
      this.getDistrictData(id);
    },
    getAddress() {
      getProvince(this.formData.infoLocCountryId).then(res => {
        this.provinceOptions = res;
      });
    },
    getCityData(id) {
      getCity(id).then(res => {
        this.cityOptions = res;
      });
    },
    getDistrictData(id) {
      getDistrict(id).then(res => {
        this.districtOptions = res;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.longTerm-style {
  color: #888;
  padding: 10px;
}

.input-width {
  width: 400px;
}
.upload-width {
  width: 400px;
}
.cascader-style {
  width: 300px;
  margin-bottom: 20px;
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}
</style>
